<script setup lang="ts">
import { PropType, ref, watch } from 'vue'
import { FormInstance, FormOptions } from '../../form/src/types/types'
import { isScroll } from 'element-plus/es/utils/index.mjs'

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 表单配置项
  options: {
    type: Array as PropType<FormOptions[]>,
    required: true
  },
  // 只在屏幕区域内滚动
  isScroll: {
    type: Boolean,
    default: false
  },
  // 上传组件事件
  onPreview: {
    type: Function as PropType<Function>,
    default: null
  },
  onRemove: {
    type: Function as PropType<Function>,
    default: null
  },
  onSuccess: {
    type: Function as PropType<Function>,
    default: null
  },
  onError: {
    type: Function as PropType<Function>,
    default: null
  },
  onProgress: {
    type: Function as PropType<Function>,
    default: null
  },
  onChange: {
    type: Function as PropType<Function>,
    default: null
  },
  onExceed: {
    type: Function as PropType<Function>,
    default: null
  },
  beforeUpload: {
    type: Function as PropType<Function>,
    default: null
  },
  beforeRemove: {
    type: Function as PropType<Function>,
    default: null
  }
})

// 分发事件
let emit = defineEmits(['update:visible'])

// 表单实例
let form = ref<FormInstance | null>()

// 弹窗框的显示与隐藏
let dialogVisible = ref<boolean>(props.visible)

// 监听visible的变化
watch(
  () => props.visible,
  val => {
    dialogVisible.value = val
  }
)
watch(
  () => dialogVisible.value,
  val => {
    emit('update:visible', val)
  }
)
</script>

<template>
  <div :class="{ 'm-choose-icon-dialog-body-height': isScroll }">
    <el-dialog
      v-model="dialogVisible"
      v-bind="$attrs"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #default>
        <m-form
          label-width="100px"
          ref="form"
          :options="options"
          @upload:on-preview="onPreview"
          @upload:on-remove="onRemove"
          @upload:on-success="onSuccess"
          @upload:on-error="onError"
          @upload:on-progress="onProgress"
          @upload:on-change="onChange"
          @upload:on-exceed="onExceed"
          @upload:before-upload="beforeUpload"
          @upload:before-remove="beforeRemove"
        >
          <template #uploadArea>
            <slot name="uploadArea"></slot>
          </template>
          <template #uploadTip>
            <slot name="uploadTip"></slot>
          </template>
        </m-form>
      </template>
      <template #footer>
        <slot name="footer" :form="form"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
